<template>
    <div class="app-container">
        


        <!--action对应上传的后端路径
        :before-upload 上传前触发的事件， 一把可以进行大小或者文件类型的判断
        :on-success 上传成功触发的事件
    -->
        <!-- :data 绑定页面显示的数据的列表
        prop 绑定的数据的名称
         @selection-change="handleSelectionChange" 处理批量删除的所有id
    -->
    
        <el-table
            :data="list"
            v-loading="listLoading"
            element-loading-text="Loading"
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
        <!-- 选框标签 -->
        
        <el-table-column type="selection" width="55"> </el-table-column>


            <el-table-column prop="merchandise"  label="商品" width="800" header-align="center">
  
                <template slot-scope="scope">
                    <div class="order-detail">
    <div class="order-header">
      <span class="create-time">退款编号：{{ scope.row.refundNumbered| formatPrice  }}</span>
      <span class="order-id">订单号：{{ scope.row.orderNumber| formatPrice }}</span>
      <span class="seller">买家：小默123</span>
    </div>
    <div class="order-content">
      <div class="product-info">
        <img :src="scope.row.image" alt="产品图片" class="product-image">
        <div class="product-details">
          <h4 class="product-name">{{ scope.row.merchandise| formatPrice }}</h4>
          <p class="product-specs">规格：七寸</p>
          <p class="product-spicy-level">辣度：中辣</p>
        </div>
      </div>
      <div class="price-info">
        <p class="current-price">{{ scope.row.price| formatPrice }}</p>
        <p class="original-price">(原价：¥{{ scope.row.accountPayable| formatPrice }})</p>
        <p class="quantity">x1</p>
      </div>
    </div>
  </div>
</template>
            </el-table-column>
            <el-table-column prop="accountPayable" label="交易金额" width="180">
            </el-table-column>
            <el-table-column prop="accountPayable" label="退款金额" width="180">
            </el-table-column>
            <el-table-column prop="refundCause" label="退款原因" width="180">
            </el-table-column>
            <el-table-column prop="refundCause" label="退款原因" width="180">
                <template slot-scope="scope">
                    <p>{{ scope.row.updateTime | formatDateTime }}</p>
                </template>
            </el-table-column>
            <el-table-column prop="refundCause" label="退款状态" width="180">
            </el-table-column>
            <el-table-column prop="refundName" label="交易状态">
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 3, 5, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
    </div>
</template>

<script>
import { 
    listOrder, 
    pageRefund,
    addUnit,
    listPrimary,
    deleteUnitBatch,
    deleteUnit,
    updateUnit,
    unitInfo,
    exportUnit,
    download
} from "@/api/refund/order";

export default {
    data() {
        return {
            list: [],
            listLoading: true,
            dialogAddVisible: false,
            dialogUpdateVisible: false,
            form: {
                measureCode: "",
                measureName: "",
                primaryFlag: "Y",
                primaryId: "",
                enableFlag: "Y",
                changeRate: 0,
                remark: "",
            },
            formLabelWidth: "140px",
            currentPage: 1,
            pageSize: 5,
            total: 100,
            orderNumber:null,
            merchandise:null,
            affiliation:null,
            consignee:null,
            courierName:null,
            phone:null,
            primaryList: [],
            multipleSelection: []
        };
    },
    filters: {
    formatDateTime(value) {
      if (!value) return '';
      const date = new Date(value);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      return `${year}年${month}月${day}日${hours}时${minutes}分${seconds}秒`;
    },
    formatPrice(value) {
      // 你的价格格式化逻辑
      return value;
    }
  },
    
    created() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            this.listLoading = true;
            pageRefund({
                pageNum: this.currentPage,
                pageSize: this.pageSize
            }).then((response) => {
                console.log(response.data);
                this.list = response.data;
                this.total = response.data.total;
                this.listLoading = false;
            });
        },
        handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        if(res.code == 200){
            alert("上传成功")
        }else{
            alert(res.msg);
        }
      },
      beforeAvatarUpload(file) {
        // unit.xlsx正则表达式的意思是，把文件名中.和.前面的全部换成空白字符
        // 获取上传文件的扩展名
        var FileExt = file.name.replace(/.+\./, "");
            if (["xls", "xlsx"].indexOf(FileExt.toLowerCase()) === -1) {
                this.$message({
                    type: "warning",
                    message: "请上传后缀名为xlsx、或xls的附件！",
                });
                // 返回false表示取消上传
                return false;
            }
      },
        showAdd() {
            // 发送请求，获取主单位列表
            listPrimary()
                .then((res) => {
                    if (res.code == 200) {
                        this.primaryList = res.data;
                        alert(this.primaryList)
                        this.dialogAddVisible = true;
                    } else {
                        alert(res.msg);
                    }
                })
                .catch((err) => alert(err));
        },
        addInfo() {
            addUnit(this.form)
                .then((res) => {
                    if (res.code == 200) {
                        // 隐藏对话框
                        this.dialogAddVisible = false;
                        // 重写获取列表
                        this.fetchData();
                    } else {
                        alert(res.msg);
                    }
                })
                .catch((err) => alert(err));
        },
        updateInfo() {
            updateUnit(this.form)
                .then((res) => {
                    if (res.code == 200) {
                        // 隐藏对话框
                        this.dialogUpdateVisible = false;
                        // 重写获取列表
                        this.fetchData();
                    } else {
                        alert(res.msg);
                    }
                })
                .catch((err) => alert(err));
        },
        handleEdit(index, row) {
            console.log(index, row);
            listPrimary().then(res=>{
                if(res.code == 200){
                    // 显示对话框
                    this.primaryList = res.data
                    this.dialogUpdateVisible = true;
                    // 查询待修改的数据
                    unitInfo({ id: row.id }).then((res) => {
                        this.form = res.data;
                    });
                }
            })
        },
        handleDelete(index, row) {
            console.log(index, row);
            deleteUnit(row.id).then((res) => {
                // 重写获取列表
                this.fetchData();
            });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.fetchData();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
            this.fetchData();
        },
        searchInfo() {
        this.fetchData();
        },
        // 处理通过复选框选中的数据
        handleSelectionChange(val) {
            // 前端定义的数组，为了后面赋值，给后端传数组
            this.multipleSelection = []
            // val是选中的行的数据组成的数组
            for(var i = 0; i < val.length; i++) {
                // 将选中的id存入数组
                this.multipleSelection.push(val[i].id)
            }
            // console.log(this.multipleSelection)
        },
        deleteInfoBatch() {
            deleteUnitBatch(this.multipleSelection).then(res=>{
                if(res.code == 200) {
                    this.fetchData()
                }else {
                    alert(res.msg)
                }
            })
        },
        exportUnits(){
        this.orderNumber = null;
        this.merchandise = null;
        this.affiliation = null;
        this.consignee = null;
        this.courierName = null;
        this.phone = null;
        this.fetchData();
        }
    },
};
</script>
<style scoped>
.order-detail {
  
  padding: 20px;
}

.order-header {
  display: flex;
  justify-content: space-between;
}

.order-id, .create-time, .seller {
  font-size: 14px;
  color: #666;
}

.order-content {
  display: flex;
  justify-content: space-between;
}

.product-info {
  display: flex;
  align-items: center;
}

.product-image {
  width: 80px;
  height: 80px;
  background-color: #ccc;
  margin-right: 20px;
}

.product-details {
  max-width: 200px;
}

.product-name {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.product-specs, .product-spicy-level {
  font-size: 12px;
  color: #999;
}

.price-info {
  text-align: right;
}

.current-price {
  font-size: 18px;
  color: #e4393c;
  margin-bottom: 5px;
}

.original-price {
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
}

.quantity {
  font-size: 14px;
  color: #333;
}
</style>
